<style lang="less" scoped>
@import "./main.less";
</style>
<style lang="css" scoped>
  .items .ivu-form-item-content {
      display: inline-block !important;
  }
</style>
<template>
  <div>
      <Row>
            <Col span="24">
                <Card>
                  <div>
                    <!-- <p slot="title" style="height: 32px">
                            <Button type="primary" @click="alertAdd" icon="plus-round">新增</Button>
                    </p> -->
                      <Form :model="searchForm" inline label-position="left" class="search">
                          <span>状态：</span>
                          <FormItem prop="status" class="items">
                              <Select v-model="searchForm.status">
                                <Icon type="ios-person-outline" slot="prepend"></Icon>
                                  <Option  :value=1 :key=1>待发布</Option>
                                  <Option  :value=2 :key=2>已上线</Option>
                                  <Option  :value=3 :key=3>已出租</Option>
                                  <Option  :value=4 :key=4>回收站</Option>
                              </Select>
                          </FormItem>
                          <span>城市：</span>
                          <FormItem prop="city">
                              <al-cascader v-model="searchForm.city" level="1" />
                          </FormItem>
                          <span>房源类型：</span>
                          <FormItem prop="status" class="items">
                              <Select v-model="searchForm.type">
                                <Icon type="ios-person-outline" slot="prepend"></Icon>
                                  <Option :value="0" :key="0">全部</Option>
                                  <Option  :value=1 :key=1>厂房</Option>
                                  <Option  :value=2 :key=2>住房</Option>
                                  <Option  :value=3 :key=3>写字楼</Option>
                                  <Option  :value=4 :key=4>商铺</Option>
                              </Select>
                          </FormItem>
                          <span>房源标题：</span>
                          <FormItem prop="status" class="items">
                              <Input v-model="searchForm.title" placeholder="请输入标题"></Input>
                          </FormItem>
                          <!-- <span >类型：</span>
                          <FormItem prop="status">
                              <Select v-model="searchForm.status">
                                  <Option  :value=1 :key=1>待发布</Option>
                                  <Option  :value=2 :key=2>已上线</Option>
                                  <Option  :value=3 :key=3>已出租</Option>
                                  <Option  :value=4 :key=4>回收站</Option>
                              </Select>
                          </FormItem> -->
                          <FormItem>
                            
                              <Button type="primary" @click="search()">Search</Button>
                          </FormItem>
                      </Form>
                    </div>
                    
                    <div>
                            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                            <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel" z-index="666" :scrollable=true>
            <p slot="header" style="color:#2d8cf0;">
                <Icon type="information-circled"></Icon>
                <span>{{formItem.id ? '编辑' : '新增'}}房屋信息</span>
            </p>
            <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="140">
                <FormItem label="类型" prop="post_type">
                    <Select v-model="formItem.post_type">
                        <Option  :value=1 :key=1>厂房</Option>
                        <Option  :value=2 :key=2>住房</Option>
                        <Option  :value=3 :key=3>写字楼</Option>
                        <Option  :value=4 :key=4>商铺</Option>
                    </Select>
                </FormItem>
                <FormItem label="(楼盘/商铺/大厦)名称" prop="name">
                    <Input v-model="formItem.name" placeholder="请输入标题"></Input>
                </FormItem>
                
                <FormItem label="城市" prop="city">
                    <al-cascader v-model="formItem.city" level="3" @on-change="selected"/>
                </FormItem>
                <FormItem label="所在详细地址" prop="street">
                    <Input v-model="formItem.street" placeholder="房屋所在区域街道"></Input>
                </FormItem>
                <FormItem label="选择位置" prop="street">
                    <div style="width:100%; height:300px">
                      <el-amap :vid="'amap-vue'" :center="center" :zoom="15" :amap-manager="amapManager" :events="events">
                        <el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="true"></el-amap-marker>
                      </el-amap>
                    </div>
                </FormItem>
                <FormItem label="首页推荐房源" prop="recommend">
                    <!-- <RadioGroup v-model="formItem.recommend">
                        <Radio label='1' ><span>推荐</span></Radio>
                        <Radio label='2' ><span>不推荐</span></Radio>
                    </RadioGroup> -->
                    <Checkbox v-model="formItem.recommend" true-value="1" false-value="2">推荐</Checkbox>
                </FormItem>
                <FormItem label="出租面积" prop="area">
                    <Input v-model="formItem.area" placeholder="请输入房源面积，单位m*m"></Input>
                </FormItem>
                <FormItem label="月租金" prop="price">
                    <Input v-model="formItem.price" placeholder="请输入租金价格"></Input>
                </FormItem>
                <!-- <FormItem label="周租金" prop="week">
                    <Input v-model="week" placeholder="请输入租金价格"></Input>
                </FormItem> -->
                <template v-if="this.formItem.post_type == 2">
                <FormItem label="房型" prop="type_id">
                    <!-- <Select v-model="formItem.type_id">
                        <Option v-for="item in houseType" :value="item.id" :key="item.id">{{ item.title }}</Option>
                    </Select> -->
                    <Col span="6">
                        <Input v-model="formItem.type.attr1" ><span slot="append">室</span></Input>
                    </Col>
                    <Col span="6">
                        <Input v-model="formItem.type.attr2" ><span slot="append">厅</span></Input>
                    </Col>
                    <Col span="6">
                        <Input v-model="formItem.type.attr3" ><span slot="append">卫</span></Input>
                    </Col>
                    <Col span="6">
                        <Input v-model="formItem.type.attr4" ><span slot="append">厨</span></Input>
                    </Col>
                </FormItem>
                </template>
                <template v-if="this.formItem.post_type == 2">
                  <FormItem label="租赁方式" prop="rent_type">
                      <Select v-model="formItem.rent_type">
                          <Option  :value=1 :key=1>整租</Option>
                          <Option  :value=2 :key=2>合租</Option>
                          <Option  :value=3 :key=3>短租</Option>
                      </Select>
                  </FormItem>
                </template>
                <template v-if="this.formItem.post_type !== 1">
                <FormItem label="装修情况" prop="finish">
                    <Select v-model="formItem.finish">
                        <Option  :value=1 :key=1>毛坯房</Option>
                        <Option  :value=2 :key=2>简单装修</Option>
                        <Option  :value=3 :key=3>精装修</Option>
                        <Option  :value=4 :key=4>豪华装修</Option>
                    </Select>
                </FormItem>
                </template>
                <template v-if="this.formItem.post_type == 2">
                  <FormItem label="房间朝向" prop="orientation">
                    <Select v-model="formItem.orientation">
                          <Option  :value=1 :key=1>东</Option>
                          <Option  :value=2 :key=2>南</Option>
                          <Option  :value=3 :key=3>西</Option>
                          <Option  :value=4 :key=4>北</Option>
                          <Option  :value=6 :key=6>东北</Option>
                          <Option  :value=5 :key=5>东南</Option>
                          <Option  :value=8 :key=8>西北</Option>
                          <Option  :value=7 :key=7>西南</Option>
                      </Select>
                  </FormItem>
                </template>
                <FormItem label="楼层">
                  <Row>
                    <Col span="8">
                        <Input v-model="formItem.floor" ><span slot="append">层</span></Input>
                    </Col>
                    <Col span="15" offset="1">
                        <Input v-model="formItem.floors" ><span slot="prepend">共</span><span slot="append">层</span></Input>
                    </Col>
                  </Row>
                </FormItem>
                <template v-if="this.formItem.post_type == 2">
                  <FormItem label="建造年代" prop="time">
                    <Input v-model="formItem.time"></Input>
                  </FormItem>
                </template>
                <template v-if="this.formItem.post_type == 2">
                  <FormItem label="租房限制" prop="restrict">
                  <Select v-model="formItem.restrict">
                        <Option  :value=1 :key=1>不限男女</Option>
                        <Option  :value=2 :key=2>不住男生</Option>
                        <Option  :value=3 :key=3>不住女生</Option>
                        <Option  :value=4 :key=4>不养宠物</Option>
                    </Select>
                    </FormItem>
                </template>
                <template v-if="this.formItem.post_type == 2">
                  <FormItem label="房源配置" prop="allocation">
                  <CheckboxGroup v-model="formItem.allocation">
                        <Checkbox v-for="allocation in allocation1" :key="allocation.id" :label="allocation.id + ''">{{ allocation.name }}</Checkbox>
                    </CheckboxGroup>
                    </FormItem>
                </template>
                <template v-if="this.formItem.post_type == 3 || this.formItem.post_type==4">
                  <FormItem label="房源配置" prop="allocation">
                  <CheckboxGroup v-model="formItem.allocation">
                        <Checkbox v-for="allocation in allocation2" :key="allocation.id" :label="allocation.id + ''">{{ allocation.name }}</Checkbox>
                    </CheckboxGroup>
                    </FormItem>
                </template>
                <FormItem label="联系人" prop="contact">
                    <Input v-model="formItem.contact" placeholder="请输入联系人"></Input>
                </FormItem>
                <FormItem label="联系方式" prop="phone">
                    <Input v-model="formItem.phone" :maxlength="11" placeholder="请输入电话号码"></Input>
                </FormItem>
                <FormItem label="室内图" prop="imgs">
                  <div class="demo-upload-list" v-for="(item,index) in imgsList" v-bind:key="index">
                      <template>
                          <img :src="item.url">
                          <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                              <Icon type="trash-a" @click.native="handleRemoveImgs(index)"></Icon>
                              <!-- <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> -->
                          </div>
                      </template>
                      <!-- <template v-else>
                          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                      </template> -->
                  </div>
                  <Upload
                      ref="upload"
                      :show-upload-list="false"
                      :default-file-list="defaultList"
                      :on-success="handleSuccess"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :on-format-error="handleFormatError"
                      :on-exceeded-size="handleMaxSize"
                      :before-upload="handleBeforeUpload"
                      :data="{token}"
                      type="drag"
                      action="https://api.fanzu.vip/api/v1/upload?style=1"
                      style="display: inline-block;width:58px;">
                      <div style="width: 58px;height:58px;line-height: 58px;">
                          <Icon type="camera" size="20"></Icon>
                      </div>
                  </Upload>
                  
                </FormItem>
                <template v-if="this.formItem.post_type == 2">
                  <FormItem label="户型图" prop="model">
                    <div class="demo-upload-list" v-for="(item,index) in modelList" v-bind:key="index">
                        <template>
                            <img :src="item.url">
                            <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                                <Icon type="trash-a" @click.native="handleRemoveModel(index)"></Icon>
                            </div>
                        </template>
                    </div>
                    <Upload
                        ref="upload"
                        :show-upload-list="false"
                        :on-success="handleModelSuccess"
                        :format="['jpg','jpeg','png']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        type="drag"
                        action="https://api.fanzu.vip/api/v1/upload?style=1"
                        style="display: inline-block;width:58px;">
                        <div style="width: 58px;height:58px;line-height: 58px;">
                            <Icon type="camera" size="20"></Icon>
                        </div>
                    </Upload>
                    
                  </FormItem>
                  <FormItem label="小区图" prop="community">
                    <div class="demo-upload-list" v-for="(item,index) in communityList" v-bind:key="index">
                        <template>
                            <img :src="item.url">
                            <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                                <Icon type="trash-a" @click.native="handleRemoveCommunity(index)"></Icon>
                            </div>
                        </template>
                    </div>
                    <Upload
                        ref="upload"
                        :show-upload-list="false"
                        :on-success="handlecommunitySuccess"
                        :format="['jpg','jpeg','png']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        type="drag"
                        action="https://api.fanzu.vip/api/v1/upload?style=1"
                        style="display: inline-block;width:58px;">
                        <div style="width: 58px;height:58px;line-height: 58px;">
                            <Icon type="camera" size="20"></Icon>
                        </div>
                    </Upload>
                    
                  </FormItem>
                </template>
                <FormItem label="封面图" prop="cover">
                    <Upload
                        action = "https://api.fanzu.vip/api/v1/upload?style=1"
                        :show-upload-list = "false"
                        type ="drag"
                        :format = "['jpg','jpeg','png']"
                        :on-success = "success">
                        <template v-if="this.formItem.cover !== ''">
                          <div style="width: 58px;height:58px;line-height: 58px;">
                            <img :src="this.formItem.cover" style="height:100%">
                          </div>
                        </template>
                        <template v-else>
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="camera" size="20"></Icon>
                            </div>
                        </template>
                    </Upload>
                </FormItem>
                <FormItem label="房源标题" prop="title">
                    <Input v-model="formItem.title" placeholder="标题" :maxlength="24"></Input>
                </FormItem>
                <FormItem label="房屋描述" prop="remark">
                    <Input v-model="formItem.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注"></Input>
                </FormItem>
                <Modal title="View Image" v-model="visibleImg" z-index="999" style="z-index:99899;" :transfer=false>
                      <img :src=" img " v-if="visibleImg" style="width: 100%">
                  </Modal>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
                <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
            </div>
        </Modal>
  </div>
</template>
<script>
const editButton = (vm, h, currentRow, index) => {
  return h(
    "Button",
    {
      props: {
        type: "primary"
      },
      style: {
        margin: "0 5px"
      },
      on: {
        click: () => {
          {
            vm.formItem.id = currentRow.id;
            vm.formItem.post_type = currentRow.post_type.id;
            vm.formItem.title = currentRow.title;
            vm.formItem.area = currentRow.area;
            vm.formItem.contact = currentRow.contact;
            vm.formItem.finish = currentRow.formItem;
            vm.formItem.title = currentRow.title;
            vm.formItem.recommend = currentRow.recommend + "";
            vm.formItem.remark = currentRow.remark;
            vm.formItem.orientation = currentRow.orientation.code;
            vm.formItem.phone = currentRow.phone;
            vm.formItem.price = currentRow.price;
            vm.formItem.week = currentRow.week;
            vm.formItem.rent_type = currentRow.rent_type.code;
            vm.formItem.finish = currentRow.finish.code;
            vm.formItem.street = currentRow.street;
            vm.imgsList = currentRow.imgs;
            vm.formItem.allocation = currentRow.allocation;
            vm.formItem.cover = currentRow.cover;
            vm.modelList = currentRow.model_imgs ? currentRow.model_imgs : [];
            vm.communityList = currentRow.community_imgs
              ? currentRow.community_imgs
              : [];
            vm.formItem.name = currentRow.name;
            vm.formItem.floor = currentRow.floor;
            vm.formItem.floors = currentRow.floors;
            vm.formItem.time = currentRow.time;
            // vm.$refs.upload.fileList = currentRow.imgs;
            // vm.uploadList = vm.$refs.upload.fileList;
            let road = currentRow.road==null?'':currentRow.road.name
            console.log(road);
            
            vm.formItem.city = [
              currentRow.province.name,
              currentRow.city.name,
              currentRow.district.name,
              currentRow.road==currentRow.road==null?'':currentRow.road.name
            ];
            vm.formItem.type.attr1 = currentRow.type_id[0];
            vm.formItem.type.attr2 = currentRow.type_id[1];
            vm.formItem.type.attr3 = currentRow.type_id[2];
            vm.formItem.type.attr4 = currentRow.type_id[3];
            vm.formItem.restrict = currentRow.restrict
            vm.center = [currentRow.lng,currentRow.lat]
            vm.marker.position = [currentRow.lng,currentRow.lat]
            vm.modalSetting.show = true;
            vm.modalSetting.index = index;
          }
        }
      }
    },
    "编辑"
  );
};
const deleteButton = (vm, h, currentRow, index) => {
  return h(
    "Poptip",
    {
      props: {
        confirm: true,
        title:
          currentRow.status == 4
            ? "您确定要彻底删除么?不能恢复哦~"
            : "您确定要删除这条房源吗? ",
        transfer: true
      },
      on: {
        "on-ok": () => {
          axios.delete(resourse + "/" + currentRow.id).then(function(response) {
            currentRow.loading = false;
            if (response.data.code === 200) {
              vm.tableData.splice(index, 1);
              vm.$Message.success(response.data.msg);
            } else {
              if (response.data.code === 403) {
                vm.$store.commit("logout", this);
                vm.$router.push({
                  name: "login"
                });
              } else {
                vm.$Message.error(response.data.msg);
              }
            }
          });
        }
      }
    },
    [
      h(
        "Button",
        {
          style: {
            margin: "0 5px"
          },
          props: {
            type: "error",
            placement: "top",
            loading: currentRow.isDeleting
          }
        },
        "删除"
      )
    ]
  );
};
const statusButton = (vm, h, currentRow, index) => {
  if (currentRow.status == 1) {
    return h(
      "Button",
      {
        props: {
          type: "primary"
        },
        on: {
          click: () => {
            vm.changeStatus(currentRow.id, 2);
          }
        }
      },
      "上架"
    );
  }
  if (currentRow.status == 4) {
    return h(
      "Button",
      {
        props: {
          type: "primary"
        },
        on: {
          click: () => {
            vm.changeStatus(currentRow.id, 1);
          }
        }
      },
      "恢复"
    );
  }
  return "";
};
const resourse = "house";
import axios from "axios";
import VueAMap from 'vue-amap'
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width:45
        },
        {
          title: "发布标题",
          key: "title",
          align: "center",
          width:200
        },
        {
          title: "房源类型",
          // key: ""
          align: "center",
          width:100,
          render:(h,params)=>{
            return h("div",params.row.post_type.title)
          }
        },
        {
          title: "省",
          key: "province",
          align: "center",
          render: (h, params) => {
            // console.log(params)
            return h(
              "div",
              {},
              params.row.province.name ? params.row.province.name : ""
            );
          },
          width:80
        },
        {
          title: "市",
          key: "city",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              {},
              params.row.city.name ? params.row.city.name : ""
            );
          },
          width:80
        },
        {
          title: "区",
          key: "district",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              {},
              params.row.district.name ? params.row.district.name : ""
            );
          },
          width:80
        },
        {
          title: "详细地址",
          key: "street",
          align: "center",
          width:200
        },
        {
          title: "房屋面积",
          key: "area",
          align: "center",
          width:100
        },
        {
          title: "房屋价格",
          key: "price",
          align: "center",
          width:100
        },
        // {
        //   title:"周租金",
        //   key:'week',
        //   width:80
        // },
        {
          title: "联系人",
          key: "contact",
          align: "center",
          width:80
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center",
          width: 120
        },
        {
          title: "修改时间",
          key: "update_time",
          align: "center",
          width: 180
        },
        {
          title: "操作",
          align: "center",
          key: "handle",
          width: 300,
          handle: ["status", "edit", "delete"]
        }
      ],
      tableData: [],
      tableShow: {
        listCount: 0,
        currentPage: 1,
        pageSize: 10
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      formItem: {
        id: 0,
        area: "",
        contact: "",
        finish: 1,
        title: "",
        orientation: 1,
        phone: "",
        price: 0,
        rent_type: 1,
        street: "",
        type: {
          attr1:0,
          attr2:0,
          attr3:0,
          attr4:0
        },
        imgs: [],
        city: [],
        cover: "",
        post_type: 0,
        allocation: [],
        floors: 0,
        floor: 0,
        week:0,
        restrict:0
      },
      loadDate: false,
      res: [],
      types: [],
      token: "",
      defaultList: [],
      imgName: "",
      visibleImg: false,
      uploadList: [],
      houseType: [],
      searchForm: {
        status: 1,
        user: "",
        city:[],
        type:0
      },
      center:[121.5273285,31.21515044],
      map:null,
      events: {
        init:()=>{
          
          // this.geo = geo
          
        },
        'click': (e) => {
          this.marker.position = [e.lnglat.lng, e.lnglat.lat]
        }
      },
      marker: {
        position: [121.5273285, 31.21515044],
        events: {
          dragend: (e) => {
            this.marker.position = [e.lnglat.lng, e.lnglat.lat]
          }
        },
        visible: true
      },
      position:[121.59996, 31.197646],
      imgsList: [],
      //户型图
      modelList: [],
      //小区图
      communityList: [],
      allocation1: [
        {
          id: 1,
          name: "阳台"
        },
        {
          id: 2,
          name: "热水器"
        },
        {
          id: 3,
          name: "空调"
        },
        {
          id: 4,
          name: "冰箱"
        },
        {
          id: 5,
          name: "电视"
        },
        {
          id: 6,
          name: "衣柜"
        },
        {
          id: 7,
          name: "网络"
        },
        {
          id: 8,
          name: "厨房"
        },
        {
          id: 9,
          name: "独立卫生间"
        },
        // {
        //   id: 10,
        //   name: "热水器"
        // },
        {
          id: 11,
          name: "床"
        },
        {
          id: 12,
          name: "试衣镜"
        },
        {
          id: 13,
          name: "书桌"
        },
        {
          id: 14,
          name: "飘窗"
        },
        {
          id: 15,
          name: "洗衣机"
        },
        {
          id: 25,
          name: "油烟机"
        },
        {
          id: 26,
          name: "沙发"
        }
      ],
      ruleValidate: {
        street:[
          {required:true,message:'请选择街道',trigger: 'blur'},
          {type:'string',max:16,message:"最大长度16个字符",trigger:'blur'}
        ],
        name:[
          {required:true,message:'请输入名称',trigger:'blur'},
          {type:'string',max:16,message:"最大长度16个字符",trigger:'blur'}
        ]
      },
      allocation2: [
        {
          id: 16,
          name: "客梯"
        },
        {
          id: 17,
          name: "货梯"
        },
        {
          id: 18,
          name: "扶梯"
        },
        {
          id: 19,
          name: "暖气"
        },
        {
          id: 20,
          name: "停车位"
        },
        {
          id: 21,
          name: "水"
        },
        {
          id: 22,
          name: "燃气"
        },
        {
          id: 23,
          name: "网络"
        },
        {
          id: 24,
          name: "办公家具"
        }
      ]
    };
  },
  created() {
    this.init();
    this.getList();
    this.getUploadToken();
    lazyAMapApiLoaderInstance.load().then(() => {
      this.inputtips = new AMap.Autocomplete();
      this.amapManager = new VueAMap.AMapManager();
    })
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;

    // this.map = new AMap.Map('map', {
    //   center: [116.397428, 39.90923],
    //   resizeEnable: true,
    //   zoom: 10
    // })
    // AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
    //   map.addControl(new AMap.ToolBar())
    //   map.addControl(new AMap.Scale())
    // })
    // this.map.on('click',(e)=>{
    //   let lng = e.lnglat.getLng()+'';
    //   this.position.lng = lng
    //   let lat = e.lnglat.getLat()+'';
    //   this.position.lat = lat
    //   console.log(lng);

    //   console.log(lat);
    //   console.log(this.position.lat);
    //   console.log(this.position.lng);

    // })
  },
  computed:{
    week:function(){
      return Math.ceil(this.formItem.price/4)
    }
  },
  methods: {
    init() {
      this.columnsList.forEach(item => {
        if (item.key === "handle") {
          item.render = (h, params) => {
            return h("div", [
              statusButton(this, h, this.tableData[params.index], params.index),
              editButton(this, h, this.tableData[params.index], params.index),
              deleteButton(this, h, this.tableData[params.index], params.index)
            ]);
          };
        }
      });
      // axios.get("house/type").then(response => {
      //   let res = response.data;
      //   if (res.code == 200) {
      //     this.houseType = res.data.list;
      //   } else {
      //     if (res.code === 403) {
      //     } else {
      //       this.$Message.error(res.msg);
      //     }
      //   }
      // });
    },
    alertAdd() {
      this.modalSetting.show = true;
    },
    changePage(page) {
      this.tableShow.currentPage = page;
      this.getList();
    },
    getUploadToken() {
      axios.get("upload/token").then(response => {
        let res = response.data;
        if (res.code === 200) {
          this.token = res.data.token;
        }
      });
    },
    changeSize(size) {
      this.tableShow.pageSize = size;
      this.getList();
    },
    doCancel(data) {
      if (!data) {
        this.formItem.id = 0;
        this.formItem.area = "";
        this.formItem.contact = "";
        this.formItem.finish = 1;
        this.formItem.name = "";
        this.formItem.orientation = 1;
        this.formItem.phone = "";
        this.formItem.price = 0.0;
        this.formItem.rent_type = 1;
        this.formItem.street = "";
        this.formItem.type_id = 0;
        this.modalSetting.loading = false;
        this.modalSetting.index = 0;
        this.imgsList = [];
        this.modelList = [];
        this.communityList = [];
        this.formItem.cover = "";
        this.formItem.restrict = 1;
        this.formItem.allocation = [];

        // this.formItem.position = []
        // this.$refs.upload.clearFiles()
        // this.$refs.upload.fileList = [];
        // this.uploadList = this.$refs.upload.fileList;
      }
    },
    getType() {},
    cancel() {
      this.modalSetting.show = false;
    },
    submit() {
      this.$refs["myForm"].validate(validate => {
        if (validate) {
          // uploadList.forEach(item=>{
          //   this.formItem.imgs.push(item.url)
          // })
          this.formItem.week = this.week
          this.formItem.imgs = this.imgsList;
          this.formItem.model = this.modelList ? this.modelList : [];
          this.formItem.community = this.communityList
            ? this.communityList
            : [];
            this.formItem.lng = this.marker.position[0],
            this.formItem.lat = this.marker.position[1],
          this.modalSetting.loading = true;
          if (this.formItem.id === 0) {
            axios.post(resourse, this.formItem).then(response => {
              this.responseHandle(response);
            });
          } else {
            axios
              .put(resourse + "/" + this.formItem.id, this.formItem)
              .then(response => {
                this.responseHandle(response);
              });
          }
          this.getList();
          this.cancel();
        }
      });
    },

    getList() {
      axios
        .get(resourse, {
          params: {
            status: this.searchForm.status,
            page: this.tableShow.currentPage,
            size: this.tableShow.pageSize,
            type: this.searchForm.type,
            province: this.searchForm.city[0]?this.searchForm.city[0].code:'',
            city: this.searchForm.city[1]?this.searchForm.city[1].code:'',
            title:this.searchForm.title
          }
        })
        .then(response => {
          this.responseHandle(response);
        });
    },
    responseHandle(response) {
      let res = response.data;
      if (res.code === 200) {
        if (this.tableData.data !== null || this.tableData.data !== undefined) {
          this.tableData = res.data.list;
          this.tableShow.listCount = res.data.count;
        }
      } else {
        if (res.code === 403) {
          this.$store.commit("logout", this);
          this.$router.push({
            name: "login"
          });
        } else {
          this.$Message.error(res.msg);
        }
      }
    },
    handleView(url) {
      this.img = url;
      this.visibleImg = true;
    },
    handleRemove(file) {
      axios.delete("images/" + file.name).then(response => {
        let res = response.data;
        if (res.code === 200) {
          const fileList = this.$refs.upload.fileList;
          this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
        }
      });
    },
    handleSuccess(res, file) {
      // console.log(res)
      if (res.code === 200) {
        // file.url = res.data.url;
        // file.name = res.data.name;
        this.imgsList.push({ name: res.data.name, url: res.data.url });
      } else {
        this.$Message.error(res.msg);
      }
    },
    handleModelSuccess(res, file) {
      if (res.code === 200) {
        // file.url = res.data.url;
        // file.name = res.data.name;
        this.modelList.push({ name: res.data.name, url: res.data.url });
      } else {
        this.$Message.error(res.msg);
      }
    },
    handlecommunitySuccess(res, file) {
      if (res.code === 200) {
        // file.url = res.data.url;
        // file.name = res.data.name;
        this.communityList.push({ name: res.data.name, url: res.data.url });
      } else {
        this.$Message.error(res.msg);
      }
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "The file format is incorrect",
        desc:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png."
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "Exceeding file size limit",
        desc: "File  " + file.name + " is too large, no more than 2M."
      });
    },
    search() {
      this.getList();
    },
    handleBeforeUpload() {
      const check = this.formItem.imgs.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded."
        });
      }
      return check;
    },
    success(res, file) {
      if (res.code === 200) {
        this.formItem.cover = res.data.url;
      }
    },
    changeStatus(id, status) {
      axios
        .patch("house/" + id + "/status", { status: status })
        .then(response => {
          let res = response.data;
          if (res.code === 200) {
            this.getList();
          } else {
            if (res.code === 403) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
    },
    selected(e){
      let str = ''
      e.forEach((item)=>{
        str+=item.name
      })
      
      let geo = new AMap.Geocoder({
        'city':'全国'
      });
      geo.getLocation(str,(status,result)=>{
        if (status === 'complete' && result.info === 'OK') {
          let res = result.geocodes[0].location;
          this.center = [res.lng,res.lat]
        }
      })
    },
    handleRemoveCommunity(index){
      this.communityList.splice(index,1)
    },
    handleRemoveImgs(index){
      this.imgsList.splice(index,1)
    },
    handleRemoveModel(index){
      this.modelList.splice(index,1)
    }
  }
};
</script>

